<template>
  <div class="home">
    <!-- 父容器高度 -->

    <b-scroll
      class="bscroll"
      ref="bscroll"
      :listenScroll="true"
      :data="{list}"
      @touchEnd="touchEnd"
      @scroll="scroll"
      @setScroll="setScroll"
    >
      <div>
        <div class="load" :key="1">{{msg}}</div>
        <ul class="bscroll-container" @click="scroll">
          <li class="liload" v-if="loadshow">{{loadmsg}}</li>
          <li v-for="(item, index) in list" :key="index">
            <span>{{item}}</span>
          </li>
        </ul>
        <div class="more">{{moremsg}}</div>
        <!-- <div class="load" v-if="true">加载更多</div> -->
      </div>
    </b-scroll>
  </div>
</template>

<script>
import BScroll from "../components/scroll";
import axios from "axios";
export default {
  name: "Home",
  components: {
    BScroll
  },
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      show: true,
      loadshow: false,
      loadmsg: "",
      msg: "下拉刷新",
      lastTime: 0,
      moremsg: "加载更多"
    };
  },

  methods: {
    // _initScroll() {
    //   this.aBScroll = null;
    //   if (!this.$refs.bscroll) {
    //     return;
    //   }

    //   let bscrollDom = this.$refs.bscroll;
    //   this.aBScroll = new BScroll(bscrollDom, {
    //     probeType: 1,
    //     click: true
    //   });

    //   console.log(this.aBScroll);

    //   //派发事件
    //   this.aBScroll.on("scroll", pos => {
    //     // 你可以打印一下参数pos中都包含了什么！
    //     console.log("scroll", pos);
    //     if (pos.y > 20) {
    //       this.show = true;
    //     }
    //     if (pos.y > 70) {
    //       this.msg = "释放立刻刷新";
    //       console.log("下拉请求-->送开就请求的过度");
    //     }
    //   });

    //   this.aBScroll.on("touchEnd", pos => {
    //     // 你可以打印一下参数pos中都包含了什么！
    //     console.log("touchEnd", pos);
    //     this.show = false;
    //     if (pos.y > 50) {
    //       this.msg = ""; //设置空
    //       this.loadmsg = "正在刷新中";
    //       this.loadshow = true;

    //       this.sleep(2000, () => {
    //         this.msg = "下拉刷新"; //设置空
    //         this.loadmsg = "刷新完成";
    //       });
    //       this.sleep(3000, () => {
    //         this.loadshow = false;
    //       });

    //       console.log("touchEnd请求");
    //     }
    //   });
    // },

    setScroll(scroll) {
      console.log(scroll.wrapperHeight);
      this.scrollHeight = scroll.wrapperHeight;
    },
    // 获取高度
    getHeight() {
      let bodyHeight = document.documentElement.clientHeight;
      console.log(bodyHeight, this.$refs.bscroll);
      let scroller = this.$refs.bscroll;
      console.log(scroller);

      let scrollerTop = scroller.getBoundingClientRect().top;
      scroller.style.height = bodyHeight - scrollerTop + "px";
      console.log(scroller.style.height);
    },
    scroll(pos) {
      console.log("scroll", pos);
      const currentTime = new Date().getTime();
      if (currentTime - this.lastTime < 5000) {
        console.log("少于5秒 不能频繁刷新");
        return;
      }
      if (pos.y > 0) {
        //判断是否还在刷新中 或者 刷新成功
        if (this.loadmsg === "正在刷新中" || this.loadmsg === "刷新完成") {
          console.log("走进这里");
          this.show = true;
          this.loadshow = false;
          this.loadmsg = "";
          this.msg = "下拉刷新";
        }
      }
      if (pos.y > 20) {
        this.show = true;
      }
      if (pos.y > 70) {
        const load = document.querySelector(".load");
        //  this.msg = "送开就刷新"
        load.innerHTML = "释放立即刷新";
        console.log("下拉请求-->送开就请求的过度");
      }
    },

    touchEnd(pos) {
      // 你可以打印一下参数pos中都包含了什么！
      console.log("touchEnd", pos);
      this.lastTime = new Date().getTime();
      // this.show = false;
      if (pos.y > 50) {
        //跟上面滑下来冲突
        this.msg = ""; //设置空
        this.loadmsg = "正在刷新中";
        this.loadshow = true;

        axios.get("https://slowmo.glitch.me/3000").then(res => {
          console.log(res);

          this.loadmsg = "刷新完成";
          setTimeout(() => {
            this.list = [-2, -1, ...this.list];

            //  this.msg = "送开就刷新"

            // this.msg = "下拉刷新"; //设置空
            this.loadshow = false;
          }, 800);
        });

        console.log("touchEnd请求");
      }

      //加载跟多
      if (pos.y < -80) {
        const more = document.querySelector(".more");
        this.moremsg = "正在加载";

        axios.get("https://slowmo.glitch.me/3000").then(res => {
          console.log(res);
          this.list = this.list.concat([99, 98, 97, 96, 95]);
          this.moremsg = "";
        });
      }
    }
  }
};
</script>


<style scoped>
.bscroll {
  width: 100%;
  height: 617px;
  overflow: hidden;
  position: relative;
}
.load {
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #fff;
}
.liload {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: skyblue;
}
li {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 30px;
}
</style>



// beforeScrollStart -> 触发时机：滚动开始之前
// scrollStart -> 触发时机：滚动开始时
// scroll -> 触发时机：滚动过程中，具体时机取决于选项中的 probeType。
// scrollCancel -> 触发时机：滚动被取消。
// scrollEnd -> 触发时机：滚动结束。
// touchEnd -> 触发时机：鼠标/手指离开。